<!doctype html>
<html style="height:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>启动页</title>

    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/swiper.css"/>
    <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .startapp{
      width: 20%;
      text-align: center;
      background: #9D0152;
      padding:10px 8%;
      color: white;
      border-radius: 18px;
      position: absolute;
      bottom: 60px;
      left:32%;
      /*transform: translate3d(1080px, 0px, 0px);*/
    }
    </style>

</head>
<body style="height:100%;">
  <div class="swiper-container swiper-container-horizontal" >
    <div class="swiper-wrapper" id="app" style="position:relative">
      <div class="swiper-slide" v-for="(content, index) in intro_screens"><img  v-image-resize="{src:content.image}" style="width:100%"></div>
      <div class="startapp" id="startapp" tapmode v-open-win  v-myclick="startapp">开始体验</div>
    </div>
    <!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</body>
<script src="script/api.js"></script>
<script src="script/vue.js"></script>
<script src="script/app.js"></script>
<script src="script/common.js"></script>
<script src="script/url.js"></script>
<script src="script/swiper.js"></script>
<script>
var intro_screens;
    apiready = function () {
        setBSImg();
        intro_screens = JSON.parse(getPrefs('intro_screens'));
        var transform_postion = document.body.offsetWidth*(intro_screens.length-1);
        document.getElementById('startapp').style.transform = "translate3d("+transform_postion+"px, 0px, 0px)";
        initApp();
        guide();
      }
    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                BSImg: Vue.BSImg,
                intro_screens:intro_screens,
            },
            methods:{
              startapp:function(){
                $api.setStorage('intro',intro_screens);
                openWin('index');
              }
            }
        });
    }
   function guide(){
     var mySwiper  = new Swiper('.swiper-container', {
       pagination: {
         el: '.swiper-pagination',
       },
       resistanceRatio: 0,
     });
   }
</script>
</html>
